﻿<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0 minimal-ui"/>
	<meta name="apple-mobile-web-app-capable" content="yes"/>
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<title>vue过渡</title>
	<link rel="stylesheet" href="bower_components/animate.css/animate.css" />
	<script type="text/javascript" src="bower_components/vue/dist/vue.js"></script>
		<style type="text/css">
		#box1{
			width:100px;
			height:100px;
			background:#00f;
			margin:0 auto;
		}
		<!-- class以动画名——transition 开头  写样式这种事基本的动画 -->
		.fade-transition{transition:1s all ease;}
		.fade-enter{opacity:0;}
		.fade-leave{opacity:0;}
	</style>
	
</head>
<body>
	<div id="box">
		<input type="button" @click="showHide()" value="btn"/>
		<div v-show="a" id="box1" transition="fade" class="animated"></div>
	</div>
<script type="text/javascript">
	window.onload = function(){
		var vm=new Vue({
			el:"#box",
			data:{
				a:true
			},
			methods:{
				showHide:function(){
					this.a = !this.a;
				}
			},
			transitions:{   //另一种写法，可以借助anmiate.css制作好的动画,现在元素上添加class anmiate
				fade:{
					enterClass:"fadeInUp",
					leaveClass:"fadeInDown"
				}
			}
		});
	}
	
</script>
</body>
</html>